<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组32.png" alt="" />
            <!-- <div class="icon2"></div> -->
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <ul class="ul">
        <li>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="企业名称" prop="a">
              <el-input
                class="input-with-select"
                v-model="form.a"
                placeholder=""
              >
              </el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="联系人名称" prop="b">
              <el-input v-model="form.b" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="联系方式" prop="c">
              <el-input v-model="form.c" placeholder="" @blur="c"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 服务协议 -->

      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <button
          class="btn btn3"
          @click="goNextFlow()"
          :class="{ actives: submitMessage == '提交中' }"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/utils";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      submitMessage: "提交",
      status: "", //判断是从列表进入还是从表格进
      radio: "",
      isLock: false,
      form: {
        a: "",
        b: "",
        c: "",
        productcood: "",
        productid: "",
        productname: "",
        producttype: "",
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
      },
    };
  },
  // 生命周期方法
  mounted() {
    this.form.productcood = localStorage.getItem("productcode");
    this.form.productid = localStorage.getItem("productcodeId");
    this.form.productname = localStorage.getItem("productname");
    this.form.producttype = localStorage.getItem("producttype");
  },
  methods: {
    // 点击勾选协议按钮
    async submitBtn() {
      this.radio = !this.radio;
    },
    // 前往下一个流程， 调用产品申请1接口将客户填写的数据返回至后端
    async goNextFlow() {
      if (this.submitMessage == "提交中") return;
      let { a, b, c, productcood, productname, productid, producttype } =
        this.form;

      if (a.trim() == "" || b.trim() == "" || c.trim() == "")
        return ElMessage.error("请输入内容");
      this.submitMessage = "提交中";
      let params = {
        entname: a,
        contactname: b,
        contactphone: c,
        productcood: productcood,
        productname: productname,
        productid: productid,
        producttype: producttype,
      };
      let url = "/api/hubeibusienss/addKJFRZL";
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        this.$router.push("/sxbApply2");
        this.submitMessage = "提交";
      } else {
        this.submitMessage = "提交";
      }
    },
    // 登录手机号验证
    c() {
      let value = Number(this.form.c);
      if (this.form.c == "") return;
      this.form.c = value.toFixed(0);
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.form.c)) {
        this.form.c = "";
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 450px;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 420px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
          .zssq {
            width: 160px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    z-index: 999;
    position: relative;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      left: 537px;
      top: 75px;
    }
    left: 537px;
    top: 55px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
  }
  .f2 {
    margin-top: 7%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      li {
        position: relative;
        width: 100%;
        margin-bottom: 18px;
        height: 50px;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -11px;
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
    // 服务协议
    .agreement {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 25px;
      text-align: center;
      margin-top: 10px;
      user-select: none;
      span {
        font-size: 14px;
        color: #666;
        margin-left: 7px;
      }
      img {
        width: 15px;
        height: 15px;
        cursor: pointer;
      }
      a {
        font-size: 14px;
        color: #0a7be0;
      }
    }
  }
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 15px 0 5px 0;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #0a7be0;
      border-radius: 4px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 300;
      color: #ffffff;
      margin-right: 30px;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 320px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.bbbb .el-input__inner) {
  width: 220px;
}
::v-deep(.el-select .el-input input) {
  width: 100px;
}
::v-deep(.input-with-select .el-input-group__prepend) {
  background-color: #fff;
}
</style>
<style lang="scss"></style>
